{extend name="common/layout" /}
{block name="main"}
<div class="el-breadcrumb">
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item>房屋管理</el-breadcrumb-item>
    <el-breadcrumb-item>到账账单</el-breadcrumb-item>
  </el-breadcrumb>
</div>

<span style="padding-left: 10px;"></span>
<el-select v-model="house_number_id" placeholder="请选择" @change="numberChange" clearable>
  <el-option v-for="item in numberData" :key="item.id" :label="item.name" :value="item.id">
  </el-option>
</el-select>
<span style="padding-left: 10px;"></span>
今日到账总金额：{{sum}}
<span class="el-right">
  <el-button icon="el-icon-brush" @click="handleBrush"></el-button>
</span>
<div style="margin-top: 15px;">
  <el-table :data="tableData" stripe border style="width: 100%">
    <el-table-column prop="property_name" label="房产" fixed width="85">
    </el-table-column>
    <el-table-column prop="number_name" label="房号" fixed width="85">
    </el-table-column>
    <el-table-column prop="lease" label="租期" fixed width="160">
    </el-table-column>
    <el-table-column prop="electricity_meter_this_month" label="电表度数" v-if="visible">
    </el-table-column>
    <el-table-column prop="electricity_consumption" label="用电量" v-if="visible">
    </el-table-column>
    <el-table-column prop="electricity" label="电费">
    </el-table-column>
    <el-table-column prop="water_meter_this_month" label="水表度数" v-if="visible">
    </el-table-column>
    <el-table-column prop="water_consumption" label="用水量" v-if="visible">
    </el-table-column>
    <el-table-column prop="water" label="水费">
    </el-table-column>
    <el-table-column prop="rental" label="租金">
    </el-table-column>
    <el-table-column prop="deposit" label="押金">
    </el-table-column>
    <el-table-column prop="other_charges" label="其他费用">
    </el-table-column>
    <el-table-column prop="total_money" label="总金额">
    </el-table-column>
    <el-table-column prop="note" label="备注" width="300">
    </el-table-column>
    <el-table-column prop="accounting_date" label="到账日期" fixed="right">
    </el-table-column>
</div>
<div style="margin-top: 15px;">
  <el-pagination background layout="total, sizes, prev, pager, next" :total="pageTotal" :page-sizes="[10, 20, 50]"
    :page-size="10" v-model::current-page="currentPage" @current-change="changeTable" @size-change="handleSizeChange">
  </el-pagination>
</div>
{/block}

{block name="script"}
<script>
  const data = {
    tableData: [],
    sum: 0,
    // 分页
    pageTotal: 0,
    currentPage: 1,
    currentLimit: 10,
    visible: false,
    numberData: [],
    house_number_id: '',
  };
  function f() {
    return {
      init: function () {
        this.queryTable();
        let that = this;
        axiosGet("{:url('house.number/queryNumberId')}").then(response => {
          if (response.code == 1) {
            that.numberData = response.data;
          } else {
            that.$message.error('系统出错了!!!');
          }
        });
        axiosGet("{:url('sum')}").then(response => {
          if (response.code == 1) {
            that.sum = response.msg;
          } else {
            that.$message.error('系统出错了!!!');
          }
        });
      },
      queryTable: function (params) {
        let that = this;
        axiosGet("{:url('query')}", params).then(response => {
          if (response.code == 1) {
            that.tableData = response.data;
            that.pageTotal = response.count;
          } else {
            that.$message.error('系统出错了!!!');
          }
        });
      },
      // 分页-选择(下一页)查询
      changeTable(val) {
        let params = {
          'house_number_id': this.house_number_id,
          'house_property_id': this.houseDef,
          'page': val,
          'limit': this.currentLimit,
        }
        this.queryTable(params);
      },
      // 分页-切换每页条数查询
      handleSizeChange(val) {
        let params = {
          'house_number_id': this.house_number_id,
          'house_property_id': this.houseDef,
          'page': this.currentPage,
          'limit': val,
        }
        this.queryTable(params);
      },
      handleBrush() {
        this.visible = !this.visible;
      },
      numberChange(val) {
        let params = {
          'house_number_id': val,
          'house_property_id': this.houseDef,
          'page': this.currentPage,
          'limit': this.currentLimit,
        }
        this.queryTable(params);
      }
    }
  }
</script>
{/block}